import { Layout } from '@/components/Layout';

export const AboutPage = () => {

  return (
    <Layout>
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
            <h1 className="text-4xl font-bold text-blue-600 mb-8">关于项目</h1>
            
            <div className="prose prose-lg max-w-none">
              <h2 className="text-2xl font-semibold mb-4">React 18 CLI 2025</h2>
              <p className="text-gray-600 dark:text-gray-300 mb-6">
                这是一个现代化的 React 18 项目模板，集成了当前最流行的前端技术栈和最佳实践。
              </p>

              <h3 className="text-xl font-semibold mb-4">技术栈</h3>
              <div className="grid md:grid-cols-2 gap-6 mb-8">
                <div>
                  <h4 className="font-semibold text-lg mb-2">核心框架</h4>
                  <ul className="space-y-2 text-gray-600 dark:text-gray-300">
                    <li>• React 18 - 最新的 React 版本</li>
                    <li>• TypeScript - 类型安全</li>
                    <li>• Vite - 快速的构建工具</li>
                    <li>• Tailwind CSS - 实用优先的CSS框架</li>
                  </ul>
                </div>
                
                <div>
                  <h4 className="font-semibold text-lg mb-2">状态管理</h4>
                  <ul className="space-y-2 text-gray-600 dark:text-gray-300">
                    <li>• Zustand - 轻量级状态管理</li>
                    <li>• 持久化存储 - 自动保存用户状态</li>
                    <li>• 类型安全 - 完整的 TypeScript 支持</li>
                  </ul>
                </div>
                
                <div>
                  <h4 className="font-semibold text-lg mb-2">路由系统</h4>
                  <ul className="space-y-2 text-gray-600 dark:text-gray-300">
                    <li>• React Router v6 - 声明式路由</li>
                    <li>• 路由守卫 - 基于认证的保护</li>
                    <li>• 懒加载 - 代码分割优化</li>
                  </ul>
                </div>
                
                <div>
                  <h4 className="font-semibold text-lg mb-2">HTTP 请求</h4>
                  <ul className="space-y-2 text-gray-600 dark:text-gray-300">
                    <li>• Axios - HTTP 客户端</li>
                    <li>• 请求/响应拦截器</li>
                    <li>• 错误处理 - 统一错误管理</li>
                    <li>• Token 自动管理</li>
                  </ul>
                </div>
              </div>

              <h3 className="text-xl font-semibold mb-4">项目特性</h3>
              <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-8">
                <ul className="space-y-3 text-gray-600 dark:text-gray-300">
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>完整的用户认证系统（登录/注册/登出）</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>基于角色的路由守卫和权限控制</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>响应式设计，支持移动端和桌面端</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>深色/浅色主题切换</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>TypeScript 类型安全，减少运行时错误</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-green-500 mr-2">✓</span>
                    <span>现代化的开发体验，热重载和快速构建</span>
                  </li>
                </ul>
              </div>

              <h3 className="text-xl font-semibold mb-4">快速开始</h3>
              <div className="bg-gray-900 text-gray-100 rounded-lg p-6 font-mono text-sm">
                <div className="mb-2"># 安装依赖</div>
                <div className="mb-4">npm install</div>
                
                <div className="mb-2"># 启动开发服务器</div>
                <div className="mb-4">npm run dev</div>
                
                <div className="mb-2"># 构建生产版本</div>
                <div>npm run build</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};
